<template>
  <div style="width: 200px">
    <f-menu
      :data="data1"
      name="a"
      index="b"
      icon="c"
      children="d"
      defaultActive="1"
      v-bind="$attrs"
    ></f-menu>
    <f-infinite-menu
      :data="data2"
      name="a"
      index="b"
      icon="c"
      children="d"
      defaultActive="3-2"
      background-color="orange"
      active-text-color="red"
    ></f-infinite-menu>
  </div>
</template>

<script lang="ts" setup>
  import {} from 'vue'
  let data1 = [
    {
      a: '导航1',
      b: '1',
      c: 'Document'
    },
    {
      a: '导航2',
      b: '2',
      c: 'Document'
    },
    {
      a: '导航3',
      b: '3',
      c: 'Document',
      d: [
        {
          a: '导航3-1',
          b: '3-1',
          c: 'Document'
        },
        {
          a: '导航3-2',
          b: '3-2',
          c: 'Document'
        }
      ]
    }
  ]

  let data2 = [
    {
      a: '导航1',
      b: '1',
      c: 'Document'
    },
    {
      a: '导航2',
      b: '2',
      c: 'Document'
    },
    {
      a: '导航3',
      b: '3',
      c: 'Document',
      d: [
        {
          a: '导航3-1',
          b: '3-1',
          c: 'Document'
        },
        {
          a: '导航3-2',
          b: '3-2',
          c: 'Document'
        },
        {
          a: '导航3-3',
          b: '3-3',
          c: 'Document',
          d: [
            {
              a: '导航3-3-1',
              b: '3-3-1',
              c: 'Document'
            },
            {
              a: '导航3-3-2',
              b: '3-3-2',
              c: 'Document',
              d: [
                {
                  a: '导航3-3-2-1',
                  b: '3-3-2-1',
                  c: 'Document'
                }
              ]
            }
          ]
        }
      ]
    }
  ]
</script>
<style lang="scss" scoped></style>
